@import "_common.less";

body{
  font-family : "Microsoft YaHei", "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
  background  : #373d41;
}

a {
  outline : none;
}

// 最外层包裹容器
.mgr-wrapper {
  overflow : hidden;
  position : fixed;
  left     : 0;
  right    : 0;
  top      : 0;
  bottom   : 0;
}

// 顶条
.mgr-topbar-area {
  position   : absolute;
  z-index    : 100;
  height     : 50px;
  left       : 0;
  right      : 0;
  top        : 0;
  background : #373d41;

  .mgr-logo {
    position     : absolute;
    width        : 60px;
    height       : 50px;
    left         : 0;
    top          : 0;
    background   : url(../img/sprite.png) 0px 0px no-repeat;
    border-right : 1px solid #2a2f32;
  }

  .mgr-title {
    position    : absolute;
    height      : 50px;
    left        : 60px;
    top         : 0;
    margin      : 0;
    padding     : 0 20px;
    line-height : 50px;
    font-size   : 16px;
    color       : #fff;
    text-align  : left;
  }

  .mgr-ops {
    position    : absolute;
    z-index     : 110;
    height      : 50px;
    right       : 0;
    top         : 0;
    background  : #373d41;
    line-height : 0;
    font-size   : 0;
    text-align  : right;

    .mgr-op-item {
      display        : inline-block;
      position       : relative;
      height         : 50px;
      margin         : 0;
      padding        : 0;
      border-left    : 1px solid #2a2f32;
      vertical-align : top;

      .mgr-op-btn {
        overflow   : hidden;
        display    : block;
        position   : relative;
        height     : 50px;
        margin     : 0;
        padding    : 0 20px;
        font-size  : 14px;
        text-align : center;

        span {
          display        : inline-block;
          position       : relative;
          height         : 50px;
          line-height    : 50px;
          font-size      : 14px;
          color          : #e1e1e1;
          vertical-align : middle;
        }

        i {
          display      : inline-block;
          position     : relative;
          width        : 0;
          height       : 0;
          margin-left  : 8px;
          padding      : 0;
          border-left  : 4px solid transparent;
          border-right : 4px solid transparent;
          border-top   : 6px solid #e1e1e1;
        }
      }

      ul {
        display  : none;
        position : absolute;
        width    : 150px;
        right    : 0;
        top      : 50px;
        margin   : 0;
        padding  : 0;
        .fnDropShadow();

        li {
          position : relative;
          height   : 40px;
          width    : 100%;
          margin   : 0;
          padding  : 0;

          a {
            display     : block;
            position    : absolute;
            left        : 0;
            right       : 0;
            top         : 0;
            bottom      : 0;
            margin      : 0;
            padding     : 0 20px;
            line-height : 40px;
            font-size   : 12px;
            color       : #666;
            text-align  : left;
            background  : #fff;

            &:hover {
              background : #eee;
            }
          }
        }
      }

      &:hover {
        .mgr-op-btn {
          span {
            color : #00c1de;
          }
          i {
            border-top : 6px solid #00c1de;
          }
        }
        ul {
          display : block;
        }
      }
    }
  }
}

// 内容区域
.mgr-main-content-area {
  position   : absolute;
  top        : 50px;
  bottom     : 0;
  left       : 0;
  right      : 0;
  background : #4a5064;
}

// 侧边导航
.mgr-sidenav-area {
  overflow   : hidden;
  position   : absolute;
  z-index    : 90;
  width      : 200px;
  left       : 0;
  top        : 0;
  bottom     : 0;
  background : #333744;

  .mgr-switch {
    display    : block;
    position   : absolute;
    height     : 40px;
    left       : 0;
    right      : 0;
    top        : 0;
    background : #4a5064;

    i {
      display     : block;
      position    : absolute;
      width       : 12px;
      height      : 12px;
      left        : 50%;
      top         : 50%;
      margin-left : -6px;
      margin-top  : -6px;
      background  : #afbcd6;

      span {
        display       : block;
        position      : absolute;
        width         : 2px;
        height        : 12px;
        top           : 0;
        left          : 50%;
        margin        : 0 0 0 -4px;
        border-left   : 3px solid #4a5064;
        border-right  : 3px solid #4a5064;
        border-top    : none;
        border-bottom : none;
      }
    }
  }

  .mgr-tip {
    display  : none;
    position : absolute;
    height   : 40px;
    width    : 200px;
    left     : 55px;
    top      : 40px;

    i {
      display       : block;
      position      : absolute;
      width         : 0;
      height        : 0;
      left          : 0;
      top           : 50%;
      margin-top    : -4px;
      padding       : 0;
      border-top    : 4px solid transparent;
      border-bottom : 4px solid transparent;
      border-right  : 6px solid #42485b;
    }

    span {
      display     : block;
      position    : absolute;
      height      : 34px;
      left        : 6px;
      top         : 50%;
      margin-top  : -17px;
      padding     : 0 15px;
      line-height : 34px;
      font-size   : 12px;
      color       : #fff;
      text-align  : center;
      background  : #42485b;
      .fnBorderRadius(2px);
    }
  }

  .mgr-scroll-content {
    overflow-x : hidden;
    overflow-y : scroll;
    position   : absolute;
    width      : 220px;
    top        : 40px;
    bottom     : 0;
    left       : 0;

    .mgr-content {
      position : relative;
      width    : 200px;
      margin   : 0;
      padding  : 0;
    }

    ul, li {
      margin  : 0;
      padding : 0;
    }

    .mgr-btn {
      display     : block;
      position    : relative;
      height      : 40px;
      margin      : 0;
      padding     : 0 0 0 50px;
      line-height : 40px;
      font-size   : 12px;
      color       : #fff;
      text-align  : left;
    }

    .mgr-1-item {

      .mgr-1-btn {
        background : #42485b;

        &:hover {
          background : #00c1de;
        }

        i {
          display    : block;
          position   : absolute;
          width      : 20px;
          height     : 20px;
          left       : 15px;
          top        : 10px;
          margin     : 0;
          padding    : 0;
          background : url(../img/sprite.png) -60px 0;
        }
      }

      .mgr-1-list {
        display : none;
      }
      &.show .mgr-1-list {
        display : block;
      }
    }

    .mgr-2-item {

      .mgr-2-btn {
        line-height : 0;
        font-size   : 12px;
        background  : #333744;

        &:hover {
          background : #4a5064;
        }

        span {
          display        : inline-block;
          position       : relative;
          height         : 40px;
          line-height    : 40px;
          vertical-align : middle;
        }

        i {
          display      : inline-block;
          position     : relative;
          width        : 0;
          height       : 0;
          margin-left  : 8px;
          padding      : 0;
          border-left  : 4px solid transparent;
          border-right : 4px solid transparent;
          border-top   : 6px solid #fff;
        }
      }

      .mgr-2-list {
        display : none;
      }
      &.show .mgr-2-list {
        display : block;
      }
    }

    .mgr-3-item {

      .mgr-3-btn {
        padding    : 0 0 0 60px;
        background : #333744;

        &:hover {
          background : #4a5064;
        }
      }

      .mgr-3-list {
        display : none;
      }
      &.show .mgr-3-list {
        display : block;
      }
    }
  }

  &.min {
    overflow : visible;
    width    : 50px;

    .mgr-scroll-content {
      overflow : hidden;
      width    : 50px;
    }

    .mgr-switch span {
      width         : 12px;
      height        : 2px;
      left          : 0;
      top           : 50%;
      margin        : -4px 0 0 0;
      border-left   : none;
      border-right  : none;
      border-top    : 3px solid #4a5064;
      border-bottom : 3px solid #4a5064;
    }
  }
}

// 主页面区域
.mgr-page-area {
  position   : absolute;
  left       : 200px;
  right      : 0;
  top        : 0;
  bottom     : 0;
  background : #eaedf1;

  &.min {
    left : 50px;
  }
}

// 主页面tab区域
.mgr-page-tab-area {
  position   : absolute;
  height     : 40px;
  left       : 0;
  right      : 0;
  top        : 0;
  background : #4a5064;

  .mgr-tab {
    overflow : hidden;
    position : absolute;
    left     : 0;
    right    : 72px;
    top      : 3px;
    bottom   : 0;

    .mgr-tab-content {
      position    : absolute;
      width       : 100000px;
      height      : 37px;
      left        : 0;
      top         : 0;
      line-height : 0;
      font-size   : 0;
      text-align  : left;

      .mgr-tab-btn {
        display     : inline-block;
        position    : relative;
        height      : 37px;
        min-width   : 42px;
        margin      : 0 3px 0 0;
        padding     : 0 15px;
        line-height : 37px;
        font-size   : 12px;
        color       : #555;
        text-align  : center;
        background  : #c1c1c1;

        &.active {
          background : #eaedf1;
        }

        &.mgr-tab-btn-normal {
          padding : 0 35px 0 15px;

          i {
            display        : block;
            position       : absolute;
            width          : 16px;
            height         : 16px;
            right          : 10px;
            top            : 50%;
            margin-top     : -8px;
            padding        : 0;
            line-height    : 14px;
            font-size      : 12px;
            color          : #4a5064;
            text-align     : center;
            background     : #d6d6d6;
            vertical-align : top;
            font-style     : normal;
            .fnBorderRadius(3px);

            &:hover {
              color : #000;
            }
          }
        }
      }
    }
  }

  .mgr-op {
    display     : none;
    position    : absolute;
    height      : 16px;
    width       : 72px;
    right       : 0;
    top         : 50%;
    margin-top  : -8px;
    text-align  : center;
    line-height : 0;
    font-size   : 0;

    .mgr-op-btn {
      display        : inline-block;
      position       : relative;
      width          : 16px;
      height         : 16px;
      margin         : 0 3px;
      padding        : 0;
      line-height    : 14px;
      font-size      : 12px;
      color          : #4a5064;
      text-align     : center;
      background     : #999;
      vertical-align : top;
      .fnBorderRadius(3px);

      &:hover {
        background : #eaedf1;
      }
    }
  }
}

// 主页面内容区域
.mgr-page-content-area {
  overflow   : auto;
  position   : absolute;
  top        : 40px;
  bottom     : 0;
  left       : 0;
  right      : 0;
  background : #eaedf1;

  .mgr-page {
    display : none;
  }

  .mgr-page-title {
    position    : relative;
    height      : 50px;
    margin      : 0 0 15px 0;
    padding     : 0 5px;
    line-height : 50px;
    font-size   : 25px;
    color       : #000;
    text-align  : left;

    i {
      display    : block;
      height     : 1px;
      margin     : 0;
      padding    : 0;
      background : #cfd1d9;
    }
  }

  .mgr-page-row {
    position : relative;
    margin   : 15px auto;
    padding  : 0;

    &:after {
      display     : block;
      clear       : both;
      content     : '.';
      height      : 0;
      line-height : 0;
      font-size   : 0;
      visibility  : hidden;
    }
  }

  .mgr-page-col {
    box-sizing : border-box;
    float      : left;
    position   : relative;
    margin     : 0;
    padding    : 0 5px;

    &.mgr-page-col-4 {
      width : 33.3333%;
    }
    &.mgr-page-col-8 {
      width : 66.6666%
    }

    .mgr-page-col-content {
      position   : relative;
      height     : 360px;
      padding    : 5px 15px;
      background : #fff;
      .fnDropShadow();
    }
  }

  .mgr-page-col-title {
    position      : relative;
    height        : 40px;
    line-height   : 40px;
    margin        : 0 auto 8px;
    padding       : 0 0 0 18px;
    font-size     : 14px;
    color         : #555;
    text-align    : left;
    border-bottom : 1px solid #ddd;

    i {
      display    : block;
      position   : absolute;
      width      : 10px;
      height     : 10px;
      left       : 0;
      top        : 50%;
      margin-top : -5px;
      background : #00c1de;

      span {
        display     : block;
        position    : absolute;
        width       : 10px;
        height      : 2px;
        left        : 50%;
        top         : 50%;
        margin-left : -7px;
        margin-top  : -3px;
        background  : none;
        border      : 2px solid #fff;
      }

      em {
        display     : block;
        position    : absolute;
        width       : 2px;
        height      : 10px;
        left        : 50%;
        top         : 50%;
        margin-left : -3px;
        margin-top  : -7px;
        background  : none;
        border      : 2px solid #fff;
      }
    }
  }

  .mgr-page-col-more {
    display     : block;
    position    : absolute;
    z-index     : 1;
    width       : 50px;
    height      : 40px;
    top         : 5px;
    right       : 15px;
    margin      : 0;
    padding     : 0;
    line-height : 40px;
    font-size   : 12px;
    color       : #00c1de;
    text-align  : right;

    &:hover {
      color : lighten(#00c1de, 10%);
    }
  }

  .mgr-page-col-list {
    position : relative;
    margin   : 0;
    padding  : 0;

    li {
      position : relative;
      height   : 25px;
      margin   : 0;
      padding  : 0;

      a {
        overflow      : hidden;
        display       : block;
        position      : absolute;
        left          : 0;
        right         : 0;
        top           : 0;
        bottom        : 0;
        padding-right : 50px;
        line-height   : 25px;
        font-size     : 12px;
        color         : #444;
        text-align    : left;
        text-overflow : ellipsis;
        white-space   : nowrap;

        &:hover {
          color : #000;
        }

        span {
          overflow   : hidden;
          display    : block;
          position   : absolute;
          width      : 45px;
          top        : 0;
          bottom     : 0;
          right      : 0;
          text-align : right;
        }
      }
    }
  }
}

.mgr-page-home {
  position   : relative;
  margin     : 0 auto;
  padding    : 15px 20px;
  background : #eaedf1;

  .mgr-home-page-title-area {
    position : relative;
    height   : 50px;
    margin   : 0 0 15px 0;
    padding  : 0 5px;
  }

  .mgr-home-page-title {
    position    : absolute;
    width       : 190px;
    height      : 50px;
    left        : 5px;
    top         : 0;
    line-height : 50px;
    font-size   : 25px;
    color       : #000;
    text-align  : left;
  }

  .mgr-home-nav-left, .mgr-home-nav-right {
    position   : absolute;
    height     : 43px;
    top        : 7px;

    &.mgr-home-nav-left {
      width      : 400px;
      left       : 195px;
      text-align : left;
    }
    &.mgr-home-nav-right {
      width      : 180px;
      right      : 5px;
      text-align : right;
    }

    .mgr-home-nav-item {
      display        : inline-block;
      position       : relative;
      height         : 43px;
      vertical-align : top;

      .mgr-home-nav-btn {
        display     : block;
        height      : 43px;
        padding     : 0 10px;
        line-height : 0;
        font-size   : 12px;
        text-align  : center;
        background  : #eaedf1;

        span {
          display        : inline-block;
          position       : relative;
          height         : 43px;
          line-height    : 43px;
          font-size      : 12px;
          color          : #424242;
          vertical-align : middle;
        }

        i {
          display      : inline-block;
          position     : relative;
          width        : 0;
          height       : 0;
          margin-left  : 5px;
          padding      : 0;
          border-left  : 4px solid transparent;
          border-right : 4px solid transparent;
          border-top   : 6px solid #999;
        }
      }

      .mgr-home-nav-left-drop {
        display    : none;
        position   : absolute;
        z-index    : 70;
        width      : 150px;
        top        : 43px;
        left       : 0;
        margin     : 0;
        padding    : 0;
        background : #fff;
        .fnDropShadow();

        li {
          position : relative;
          height   : 40px;
          margin   : 0;
          padding  : 0;

          a {
            display     : block;
            position    : absolute;
            left        : 0;
            right       : 0;
            top         : 0;
            bottom      : 0;
            margin      : 0;
            padding     : 0 35px 0 20px;
            line-height : 40px;
            font-size   : 12px;
            color       : #666;
            text-align  : left;
            background  : #fff;

            &:hover {
              background : #eee;
            }

            i {
              display       : block;
              position      : absolute;
              width         : 0;
              height        : 0;
              right         : 15px;
              top           : 50%;
              margin-top    : -3px;
              padding       : 0;
              border-left   : 6px solid #9d9d9d;
              border-top    : 4px solid transparent;
              border-bottom : 4px solid transparent;
            }
          }

          ul {
            display    : none;
            position   : absolute;
            z-index    : 70;
            width      : 150px;
            top        : 0;
            left       : 150px;
            margin     : 0;
            padding    : 0;
            background : #fff;
            .fnDropShadow();
          }

          &:hover ul {
            display : block;
          }
        }
      }

      .mgr-home-nav-right-drop {
        display     : none;
        position    : absolute;
        z-index     : 70;
        width       : 320px;
        top         : 43px;
        right       : 0;
        margin      : 0;
        padding     : 5px 10px;
        line-height : 0;
        font-size   : 0;
        text-align  : center;
        background  : #fff;
        .fnDropShadow();

        li {
          display        : inline-block;
          width          : 140px;
          margin         : 0 10px;
          padding        : 0;
          vertical-align : top;
        }

        a {
          box-sizing  : border-box;
          display     : block;
          position    : relative;
          width       : 140px;
          height      : 40px;
          margin      : 0;
          padding     : 0 20px;
          line-height : 40px;
          font-size   : 12px;
          color       : #666;
          text-align  : center;
          background  : #fff;

          i {
            display    : block;
            position   : absolute;
            height     : 1px;
            left       : 0;
            right      : 0;
            bottom     : 0;
            background : #dcdcdc;
          }
        }

        ul {
          position   : relative;
          width      : 140px;
          margin     : 0;
          padding    : 0;
          background : #fff;

          li {
            margin : 0;
          }

          a {
            text-align : left;

            &:hover {
              background: #eee;
            }
          }
        }
      }

      &:hover {
        .mgr-home-nav-btn {
          background : #fff;
        }
        .mgr-home-nav-left-drop, .mgr-home-nav-right-drop {
          display : block;
        }
      }
    }
  }

  .mgr-home-title-line {
    position   : absolute;
    height     : 1px;
    top        : 50px;
    left       : 5px;
    right      : 5px;
    background : #cfd1d9;
  }

  .mgr-home-intro-area {

    .mgr-home-intro-image {
      display  : block;
      position : absolute;
      width    : 211px;
      height   : 162px;
      left     : 15px;
      top      : 5px;
    }

    .mgr-home-intro-title-line {
      position   : absolute;
      height     : 1px;
      left       : 241px;
      right      : 15px;
      top        : 45px;
      background : #d8d8d8;
    }

    .mgr-home-intro-title {
      position      : absolute;
      height        : 40px;
      left          : 241px;
      top           : 5px;
      line-height   : 40px;
      font-size     : 20px;
      color         : #3a3a3a;
      text-align    : left;
      border-bottom : 3px solid #00c1de;
    }

    .mgr-home-intro-content {
      overflow      : hidden;
      position      : absolute;
      height        : 110px;
      left          : 241px;
      right         : 15px;
      top           : 57px;
      margin        : 0;
      padding       : 0;
      line-height   : 22px;
      font-size     : 12px;
      color         : #3a3a3a;
      text-align    : left;
      text-overflow : ellipsis;

      .mgr-home-intro-more {
        margin-left : 10px;
        color       : #999;
        background  : #fff;

        &:hover {
          color : #00c1de;
        }
      }
    }

    .mgr-home-weather-title {
      position    : absolute;
      width       : 200px;
      left        : 15px;
      right       : 15px;
      top         : 182px;
      margin      : 0;
      padding     : 0;
      line-height : 40px;
      font-size   : 20px;
      color       : #3a3a3a;
      text-align  : left;
    }

    .mgr-home-weather-line {
      position   : absolute;
      height     : 1px;
      left       : 15px;
      right      : 15px;
      top        : 222px;
      background : #d8d8d8;
    }

    .mgr-home-weather-area {
      overflow : hidden;
      position : absolute;
      height   : 110px;
      left     : 15px;
      right    : 15px;
      top      : 238px;

      ul {
        overflow : hidden;
        position : absolute;
        width    : 100000px;
        height   : 110px;
        left     : 0;
        top      : 0;
      }

      li {
        box-sizing   : border-box;
        float        : left;
        position     : relative;
        width        : 240px;
        height       : 110px;
        margin       : 0;
        padding-left : 120px;

        .mgr-weather-type {
          position : absolute;
          width    : 110px;
          height   : 110px;
          left     : 0;
          top      : 0;

          &.mgr-weather-type-qing {
            background : url(../img/home-weather-qing.png);
          }
          &.mgr-weather-type-yin {
            background : url(../img/home-weather-yin.png);
          }
          &.mgr-weather-type-yu {
            background : url(../img/home-weather-yu.png);
          }
        }

        .mgr-weather-date {
          position    : relative;
          height      : 25px;
          margin      : 0;
          padding     : 0;
          line-height : 25px;
          color       : #4f4f4f;
          text-align  : left;

          strong {
            font-size   : 16px;
            color       : #3a3a3a;
            font-weight : normal;
          }

          span {
            font-size   : 12px;
            margin-left : 8px;
          }
        }

        .mgr-weather-temp {
          position    : relative;
          height      : 35px;
          margin      : 0;
          padding     : 0;
          line-height : 35px;
          font-size   : 22px;
          color       : #0154a2;
          text-align  : left;
        }

        .mgr-weather-desc {
          position    : relative;
          height      : 20px;
          margin      : 0;
          padding     : 0;
          line-height : 20px;
          font-size   : 12px;
          color       : #4f4f4f;
          text-align  : left;
        }
      }
    }
  }
}

.mgr-page-other {
  position : absolute;
  left     : 0;
  right    : 0;
  top      : 0;
  bottom   : 0;

  iframe {
    display  : none;
    position : absolute;
    width    : 100%;
    height   : 100%;
    left     : 0;
    right    : 0;
    top      : 0;
    bottom   : 0;
  }
}
